<template>
  <div class="member-info-page xtx-center-info">
    <!-- 修改头像 -->
    <div class="item-avatar">
      <div class="avatar">
        <img :src="userForm.avatar||defaultAvatar" alt />
        <input type="file" class="fileInput" ref="fileInput" @change="uploadAvater">
      </div>
      <a href="javascript:;" class="text" @click="$refs.fileInput.click()">修改头像</a>
    </div>
    <!-- 用户名 -->
    <div class="item-name">
      <div class="label">昵称：</div>
      <div class="content">
        <input v-model="userForm.nickname" type="text" placeholder="请输入用户名" />
      </div>
      <!-- <div class="error">
        <span class="iconfont icon-shanchu"></span>
        <span>用户名必填</span>
      </div> -->
    </div>
    <!-- 性别 -->
    <div class="item-sex">
      <div class="label">性别：</div>
      <div class="content">
        <label for="item-sex-01">
          <input v-model="userForm.gender" value="男" name="item-sex" type="radio" id="item-sex-01" checked />
          <i class="radio"></i>
          <span>男</span>
        </label>
        <label for="item-sex-02">
          <input v-model="userForm.gender" value="女" name="item-sex" type="radio" id="item-sex-02" />
          <i class="radio"></i>
          <span>女</span>
        </label>
        <label for="item-sex-03">
          <input v-model="userForm.gender" value="未知" name="item-sex" type="radio" id="item-sex-03" />
          <i class="radio"></i>
          <span>未知</span>
        </label>
      </div>
    </div>
    <!-- 生日 -->
    <div class="item-birthday">
      <div class="label">生日：</div>
      <div class="content">
        <xtx-date v-model="userForm.birthday"></xtx-date>
      </div>
    </div>
    <!-- 城市 -->
    <div class="item-city">
      <div class="label">城市：</div>
      <div class="content">
        <xtx-city
          ph="请选择所在城市"
          icon="icon-arrow-down01"
          :province-code="userForm.provinceCode"
          :city-code="userForm.cityCode"
          @change="changeCity">
        </xtx-city>
      </div>
    </div>
    <!-- 职业 -->
    <div class="item-job">
      <div class="label">职业：</div>
      <div class="content">
        <xtx-select :options="jobOptions" v-model="userForm.profession"></xtx-select>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="item-btn">
      <div class="label"></div>
      <div class="content">
        <a @click="save()" class="xtx-save-btn" href="javascript:;">保存</a>
      </div>
    </div>
  </div>
</template>

<script>
import { jobs } from '@/api/constants.js'
import XtxDate from './components/xtx-date'
export default {
  name: 'member-info-page',
  components: { XtxDate },
  data () {
    return {
      defaultAvatar: require('@/assets/images/200.png'),
      jobOptions: jobs,
      userForm: {
        id: '',
        nickname: '',
        avatar: '',
        gender: '',
        birthday: '',
        provinceCode: '',
        cityCode: '',
        profession: ''
      },
      oldUserForm: {}
    }
  },
  created () {
    this.getUser()
  },
  methods: {
    async uploadAvater (e) {
      const formData = new FormData()
      formData.append('file', e.target.files[0])
      await this.$http.post('member/profile/avatar', formData)
      this.$message({ message: '保存个人头像成功', type: 'success' })
    },
    async getUser () {
      const { data } = await this.$http.get('member/profile')
      this.userForm = data.result
      this.oldUserForm = { ...this.userForm }
    },
    changeCity (e) {
      this.userForm.provinceCode = e.provinceCode
      this.userForm.cityCode = e.cityCode
    },
    async save () {
      await this.$http.put('member/profile', this.userForm)
      this.$message({ message: '保存个人信息成功', type: 'success' })
      this.oldUserForm = { ...this.userForm }
    },
    infoHasUpdated () {
      let hasUpdated = false
      for (const key in this.userForm) {
        if (this.userForm[key] !== this.oldUserForm[key]) {
          hasUpdated = true
          break
        }
      }
      return hasUpdated
    }
  }
}
</script>

<style scoped lang='less'>
@import "./styles/info.less";
::v-deep .xtx-city {
  width:300px;
  height:50px;
  .curr-wrapper {
    line-height: 48px;
    padding-left: 10px;
    .selected {
      color: #333;
    }
  }
}
</style>
